const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
/** 类型注释
 * @type {import('webpack').Configuration}
 */
module.exports = {
	mode: 'none', // webpack4之后必须设置 否则会警告
	entry: './src/main.js',
	output: {
		path: path.join(__dirname, 'dist'),
	//	filename: 'js/bundle.[contenthash:6].js'// 设置hash值 并将文件放置在dist/js下
	},
	plugins: [
		new VueLoaderPlugin(), // 作用：将rules中的规则应用到vue单文件组件中 例：style script中的语法解析
		new CleanWebpackPlugin (),
		// 生成 index.html
		new HtmlWebpackPlugin({
            title:'这是一个vue项目',
            filename:'index.html',
			template:'./public/index.html',
			favicon:'./public/favicon.ico'
        }),
		new webpack.DefinePlugin({// 默认值配置
			BASE_URL: '"/"'
		}),
		new CopyWebpackPlugin(
			{
				patterns:['./src/assets/**','public']
			}

		)
	],
	devServer: {
		contentBase: path.join(__dirname, 'dist'), // 资源路径
		hot: true, // 是否热加载
		open: false, // 是否自动打开浏览器
		port: 8081 // 接口
	},
	
	module: {
		rules: [
			{
				test: /\.vue$/,
				use: ['vue-loader']
			},
			{
				test: /\.less$/, // \可有可无 .表示任意字符  \.更严谨 防止出现xxless文件
				use: [
					'style-loader',
					'css-loader',
					'less-loader'
				]
			},
			{
				test: /\.css$/,
				use: [ // use多个从后往前执行   先用到的放后面
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|jpe?g|gif)$/,
				use: {
					loader: 'url-loader', // 适合小文件 将文件转化为 base64 
					// 符合规则就转 不能转就使用 fallback => file-loader
					options: {
						//name: "img/[name].[contenthash:6].[ext]",
						esModule: false,
						limit: 8 * 1024 // KB 设置限制  超过则使用file-loader
					}
				}
			}
		]
	}
}